<template>
  <div class="wrapper">
    <el-form :inline="true">
      <el-form-item>
        <el-dropdown @command="setDate">
          <span class="el-dropdown-link">
            {{timeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'时间类型',id:''}">时间类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'入住时间',id:'1'}">入住时间</el-dropdown-item>
            <el-dropdown-item :command="{title:'离店时间',id:'2'}">离店时间</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="startEndTime"
          type="daterange"
          :clearable="false"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeSearch"
          :disabled="isDisable"
          size="small">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="chart-wrap">
      <!-- <div id="myChart"
      style="width:100%;height:300px"></div> -->
      <div id="myChart_1"></div>
      <div id="myChart_2"></div>
    </div>
   
    <el-form>
      <el-form-item>
        <el-table max-height="550"
          :data="payList">
          <el-table-column label="酒店名称"
            prop="hotelName"></el-table-column>
          <el-table-column label="结算方式"
            prop="clearing"></el-table-column>
          <el-table-column label="营业额"
            prop="revenue"></el-table-column>
          <el-table-column label="分销奖励"
            prop="sellMoney"></el-table-column>
              <el-table-column label="支付手续费"
            prop="pay"></el-table-column>
              <el-table-column label="服务手续费"
            prop="service"></el-table-column>
          <el-table-column label="应付营业总金额"
            prop="preTaxSum"></el-table-column>
          <el-table-column label="优惠券金额"
            prop="couponMoney"></el-table-column>
          <el-table-column label="已结算"
            prop="payment"></el-table-column>
          <el-table-column label="未结算"
            prop="unpaid"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                @click="payed(scope.row)">立即结算</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="fr">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes"
          :total="total"
          style="margin-top:20px">
        </el-pagination>
      </el-form-item>
    </el-form>
    <el-dialog title="结算"
      :visible.sync="dialogVisible"
      width="800px">
      <el-form label-width="100px"
        :rules="rules"
        :model="detailData"
        ref="finance">
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款方"
              required>
              <el-input placeholder=""
                v-model="detailData.company"
                disabled></el-input>
            </el-form-item>
            <el-form-item label="结算单号"
              prop="clearingNum">
              <el-input placeholder="请输入结算单号"
                v-model="detailData.clearingNum"></el-input>
            </el-form-item>
            <el-form-item label="收款方姓名"
              required>
              <el-input placeholder=""
                disabled
                v-model="detailData.person"></el-input>
            </el-form-item>
            <el-form-item label="收款方卡号"
              required>
              <el-input placeholder=""
                disabled
                v-model="detailData.banksAccount"></el-input>
            </el-form-item>
            <el-form-item label="付款金额"
              prop="payMoney"
              style="margin-bottom:3px">
              <el-input-number v-model="detailData.payMoney"
                controls-position="right"
                :min="0"
                :max="parseFloat(detailData.unpaid)"></el-input-number>&nbsp;&nbsp;
              <span>元</span>
            </el-form-item>
            <el-form-item style="margin:0;font-size:12px">
              <div>未结算￥{{detailData.unpaid}},
                <el-button type="text"
                  @click="detailData.payMoney = detailData.unpaid">全部结算</el-button>
              </div>
            </el-form-item>
            <el-form-item label="到账时间"
              prop="arriveTime">
              <el-date-picker v-model="detailData.arriveTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="流水单号" required v-model="detailData.banksAccount" disabled>
              <el-input placeholder=""></el-input>
            </el-form-item> -->
            <el-form-item label="收款酒店"
              required>
              <el-input placeholder=""
                v-model="detailData.hotelName"
                disabled></el-input>
            </el-form-item>
            <el-form-item label="收款方银行"
              required>
              <el-input placeholder=""
                v-model="detailData.banks"
                disabled></el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="上传凭证"
              prop="voucher"
              required>
              <el-upload class="avatar-uploader"
                :show-file-list="false"
                :http-request="sendChange"
                action="https://jsonplaceholder.typicode.com/posts/">
                <img v-if="oldPath"
                  :src="oldPath"
                  class="avatar">
                <i v-else
                  class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p class="img-content">仅支持JPG, JPEG, BMP, PNG格式, 文件小于10M<br />(建议使用缕空白色图像, 最佳尺寸126 * 45px)</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea"
                rows="6"
                v-model="detailData.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_sure">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getFinanceOverview, ClearingFinance } from "@/public/js/finance";
import { logo } from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      clearingTurnover: "",
      afterTaxPay: "",
      payList: [],
      pageNo: 1,
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      detailData: "",
      oldPath: "",
      timeStr: "时间类型",
      rules: {
        clearingNum: [
          { required: true, message: "请输入结算单号", trigger: "blur" }
        ],
        payMoney: [
          { required: true, message: "请输入付款金额", trigger: "blur" }
        ],
        voucher: [{ required: true, message: "请输入凭证", trigger: "change" }],
        arriveTime: [
          { required: true, message: "请输入到账时间", trigger: "blur" }
        ]
      },
      startEndTime: [],
      startTime: "",
      endTime: "",
      time: "",
      isDisable: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getFinanceOverview() {
      getFinanceOverview({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime,
        time: this.time
      }).then(res => {
        this.clearingTurnover = res.data.clearingTurnover;
        this.afterTaxPay = res.data.afterTaxPay;
        this.payList = res.data.payList;
        this.total = res.data.total;
        this.draw();
      });
    },
    //时间查新
    timeSearch(val) {
      this.startTime = val[0];
      this.endTime = val[1];
      this._getFinanceOverview();
    },
    setDate(command) {
      this.timeStr = command.title;
      this.time = command.id;
      this.startEndTime = [];
      if (command.id) {
        this.isDisable = false;
      } else {
        this.isDisable = true;
        this._getFinanceOverview();
      }
    },
    draw() {
      let myChart_1 = this.$echarts.init(document.getElementById("myChart_1"));
      let myChart_2 = this.$echarts.init(document.getElementById("myChart_2"));
      myChart_1.setOption({
        title: {
          text: "累计营业额",
          subtext: "￥" + this.clearingTurnover.moneySum, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 0,
          data: ["分销奖励", "支付手续费", "服务手续费", "应付营业总额","优惠券金额"]
        },
        series: {
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: this.setDataCharts(this.clearingTurnover)
        }
      });
      myChart_2.setOption({
         tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        title: {
          text: "结算记录",
          subtext: "￥" + this.afterTaxPay.afterTaxSum, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        legend: {
          bottom: 0,
          data: ["已结算", "未结算"]
        },
        series: {
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: this.setDataCharts(this.afterTaxPay)
        }
      });
    },
    //立即结算
    payed(detail) {
      console.log(detail);
      this.dialogVisible = true;
      this.oldPath = "";
      this.detailData = detail;
    },
    setDataCharts(_data) {
      let data = [];
      for (var i in _data) {
        if (i == "sellMoney") {
          data.push({
            value: _data[i],
            name: `分销奖励`
          });
        } else if (i == "pay") {
          data.push({
            value: _data[i],
            name: `支付手续费`
          });
        } else if (i == "service") {
          data.push({
            value: _data[i],
            name: `服务手续费`
          });
        } else if (i == "preTax") {
          data.push({
            value: _data[i],
            name: `应付营业总额`
          });
        } else if (i == "payment") {
          data.push({
            value: _data[i],
            name: `已结算`
          });
        } else if (i == "unpaid") {
          data.push({
            value: _data[i],
            name: `未结算`
          });
        } else if (i == "couponMoney") {
          data.push({
            value: _data[i],
            name: `优惠券金额`
          });
        }
      }
      return data;
    },
    sendChange(e) {
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      reader.onload = e => {
        let photoPath = e.target.result;
        logo({
          nowPath: photoPath,
          oldPath: this.oldPath
        }).then(res => {
          this.oldPath = res.data.path;
          this.detailData.voucher = this.oldPath;
        });
      };
    },
    // 立即结算
    _sure() {
      let data = {
        supId: this.detailData.supId,
        flowing: "",
        clearingNum: this.detailData.clearingNum,
        hotelId: this.detailData.hotelId,
        person: this.detailData.person,
        banks: this.detailData.banks,
        banksAccount: this.detailData.banksAccount,
        payMoney: this.detailData.payMoney,
        arriveTime: this.detailData.arriveTime,
        settleTime: "",
        voucher: this.detailData.voucher,
        remark: this.detailData.remark
      };
      this.$refs["finance"].validate(valid => {
        if (valid) {
          ClearingFinance(data).then(res => {
            if (!res.data.errCode) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.dialogVisible = false;
              this._getFinanceOverview();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getFinanceOverview();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this._getFinanceOverview();
    }
  },
  created() {
    this._getFinanceOverview();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding-left: 35px;
  }
  .chart-wrap {
    display: flex;
    margin-bottom: 20px;
    & > div {
      flex: 1;
      height: 400px;
    }
  }
}
</style>